<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <!-- layout 居中， 左右auto  -->
  <div class="container">
    <!-- 一行 -->
    <div class="row">
      <div class="col-md-6">
        <form name="appForm" action="http://www.baidu.com">
          <div class="form-group">
            <label for="titleInput">Bot名称：</label>
            <input 
            placeholder="请输入名称"
             id="titleInput" 
             name="title" 
             type="text" 
             required 
             class="form-control">
          </div>
          <div class="form-group">
            <label for="descInput">Bot描述：</label>
            <textarea 
            name="desc"
              class="form-control" 
              id="descInput"
              rows="3"
            ></textarea>
          </div>
          <div class="form-group">
            <button 
            class="btn btn-default btn-primary"
            id="submitBtn" type="submit">生成图标</button>
          </div>
        </form>
      </div>
    </div>
    <!-- DOM 动态插入log appenchild -->
    <div class="row" id="logo"></div>
  </div>
  <script>
    //form 可以用name来查找
    // document里会自动的将表单作为集合处理
    // const oForm=document.querySelector('form[name="appForm"]')
    const oForm=document.forms ["appForm"]
    console.log(oForm)
    oForm.addEventListener("submit",function(){
      //事件处理函数
      event.preventDefault()
      //事件处理函数，this指向当前事件的目标元素
      // js 是一周开发出来的语言
      console.log(this);
      
      const appName=this["title"].value
      console.log(appName);
      const appDesc=this["desc"].value
      // prompt 
      const prompt=`
      你是一个互联网大厂的设计师，需要设计一个移动应用的logo。
      应用名称为：${appName}，
      描述为：${appDesc}。
      设计一个高端、大气、上档次的logo
      请确保设计方案适用于移动应用图标（APP Icon）

      `
      // console.log(prompt);
      fetch('https://api.agicto.cn/v1/images/generations',{
        method:'POST',
        headers:{
          'Authorization':'Bearer sk-c84clcMFCTG9kAGH7tC1tKaluIT4nIavhb2obPXlzVYrHcrm',
          'Content-Type':'application/json'
        },
        //请求体 JSON 字符串
         body:JSON.stringify({
            model:'dall-e-3',
            prompt,
            n:1,
            size:'1024x1024'
         })
      }).then(res=>res.json()) 
      .then(data=>{
        console.log(data);
        const img=document.createElement('img')
        img.src=data.data[0].url
        img.onload=function(){
          document.getElementById('logo').appendChild(img)
        }
      })
    })
    
  </script>
</body>
</html>